<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon" id="scrollZGSM">
      <el-row class="reactInfo">
        <el-col :span="10" class="basicInfo">
          <div class="imgBox">
            <img :src="imgsrc" alt="" />
          </div>
          <div class="infoBox">
            <p class="name" v-if="domain !== 'JZ'">
              {{ reactDetail.companyName || '--' }}
            </p>
            <p class="name" v-if="domain === 'JZ'">
              {{ reactDetail.projectName || '--' }}
            </p>
            <p class="date">
              巡查日期：{{ reactDetail.inspectionDate || '--' }}
            </p>
            <p
              class="date"
              v-if="
                reactDetail.rectificationStatus === 'COMPLETE_RECTIFICATION'
              "
            >
              整改结果：{{ reactDetail.rectificationStatusDesc }}
              {{ reactDetail.isDelay ? '未延期' : '已延期' }}
            </p>
          </div>
        </el-col>
        <el-col :span="14" class="reactStatus">
          <div class="fontSize">
            整改状态：<span>{{
              reactDetail.rectificationStatusDesc || '--'
            }}</span>
            <el-link
              class="hoverCss"
              v-if="
                (reactDetail.rectificationStatus == 'PENDING_RECTIFICATION' ||
                  reactDetail.rectificationStatus ==
                    'IN_PROCESS_RECTIFICATION') &&
                isShowUpdate
              "
              @click="handleAttach"
              >处理整改资料</el-link
            >
            <el-link
              class="hoverCss"
              v-if="
                reactDetail.rectificationStatus == 'PENDING_RECTIFICATION' &&
                isShowUpdate
              "
              @click="toUpdate"
              >修改巡查情况</el-link
            >
          </div>
          <el-button
            v-if="
              reactDetail.rectificationStatus == 'NO_RECTIFICATION_REQUIRED'
            "
            class="commonBut saveBtn funComBut fr"
            @click="toUpdate"
          >
            <span class="opetareText">修改巡查情况</span>
          </el-button>
          <div
            class="progressBar"
            v-if="
              reactDetail.rectificationStatus != 'NO_RECTIFICATION_REQUIRED'
            "
          >
            <span
              class="blueCircle"
              v-if="reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'"
              >1</span
            >
            <i class="icon iconfont iconIcon1Finished" v-else></i>
            <span
              :class="
                reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'
                  ? 'boldColor'
                  : 'greyColor'
              "
              >待整改</span
            >
            <el-tooltip content="Top center" placement="top" effect="dark">
              <div slot="content">
                待整改状态：巡查结果为需整改，但未提交“整改资料”
              </div>
              <i class="icon iconfont iconhuabanfuben greyColor"></i>
            </el-tooltip>
            <span class="borderRight bgcTheme"></span>
            <span
              class="whiteCircle"
              v-show="
                reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'
              "
              >2</span
            >
            <span
              class="blueCircle"
              v-show="
                reactDetail.rectificationStatus == 'IN_PROCESS_RECTIFICATION'
              "
              >2</span
            >
            <i
              class="icon iconfont iconIcon1Finished"
              v-show="
                reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
              "
            ></i>
            <span
              :class="
                reactDetail.rectificationStatus == 'IN_PROCESS_RECTIFICATION'
                  ? 'boldColor'
                  : 'greyColor'
              "
              >整改中</span
            >
            <el-tooltip content="Top center" placement="top" effect="dark">
              <div slot="content">
                整改中状态：巡查结果为需整改，已提交“整改资料”，但未进行“完成整改”操作
              </div>
              <i class="icon iconfont iconhuabanfuben greyColor"></i>
            </el-tooltip>
            <span
              class="borderRight bgcTheme"
              v-if="reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'"
            ></span>
            <span
              class="borderRight"
              style="background: rgba(0, 0, 0, 0.15)"
              v-else
            ></span>
            <span
              :class="
                reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
                  ? 'blueCircle'
                  : 'whiteCircle'
              "
              >3</span
            >
            <span
              :class="
                reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
                  ? 'boldColor'
                  : 'greyColor'
              "
              >整改完成</span
            >
            <el-tooltip content="Top center" placement="top" effect="dark">
              <div slot="content">
                完成整改：完成整改状态：巡查结果为需整改，已提交整改资料，并完成整改操作
              </div>
              <i class="icon iconfont iconhuabanfuben greyColor"></i>
            </el-tooltip>
            <el-button
              v-if="
                reactDetail.rectificationStatus == 'IN_PROCESS_RECTIFICATION'
              "
              class="commonBut saveBtn funComBut fr"
              @click="toRectify"
            >
              完成整改
            </el-button>
          </div>
        </el-col>
      </el-row>
      <div class="spacing"></div>
      <div class="contentInfo">
        <div class="contentTitle">巡查情况</div>
        <div class="contentInfoList">
          <el-row>
            <el-col :span="24" class="subTitleBox">
              <div
                class="secondaryTitle secondaryTitleTheme"
                v-if="domain !== 'JZ'"
              >
                企业信息
              </div>
              <div
                class="secondaryTitle secondaryTitleTheme"
                v-if="domain === 'JZ'"
              >
                项目信息
              </div>
            </el-col>
          </el-row>
          <el-row v-if="domain !== 'JZ'" class="contentInfoListItem">
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >企业名称：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.companyName || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >法人代表：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.boss || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >组织机构代码：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.organizationCode || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位地址：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.address || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >劳资负责人：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.laborLeader || '--'
                }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >所属行业：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.industryName || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >联系电话：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.bossTel || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >工商登记执照代码：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.licenseCode || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >联系方式：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.contactType || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >联系电话：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.laborLeaderTel || '--'
                }}</span>
              </p>
            </el-col>
          </el-row>
          <el-row v-if="domain === 'JZ'" class="contentInfoListItem">
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >项目名称：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.projectName || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >施工方：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.pbName || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >行业类型：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.industryName || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >项目负责人：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.leader || '--'
                }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位地址：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.address || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >建设方：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.pcName || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >投资类型：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.investmentDesc || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >联系电话：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.leaderTel || '--'
                }}</span>
              </p>
            </el-col>
          </el-row>
        </div>
        <div class="contentInfoList">
          <el-row>
            <el-col :span="24" class="subTitleBox">
              <div class="secondaryTitle secondaryTitleTheme">巡查登记</div>
            </el-col>
          </el-row>
          <el-row class="contentInfoListItem">
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.inspectionDate || '--'
                }}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查员：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.inspectionPerson || '--'
                }}</span>
              </p>
            </el-col>
          </el-row>
          <el-row class="contentInfoListItem" style="padding-right: 38px">
            <el-col :span="24">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查内容：</span
                >
              </p>
            </el-col>
            <el-col class="table" :span="24">
              <el-table
                :data="tableList"
                v-loading="loading"
                :header-cell-style="{
                  background: '#eef1f6',
                  color: '#606266',
                }"
                highlight-current-row
                stripe
                style="border: 1px solid #dfe6ec"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="typeName"
                  label="巡查类型"
                ></el-table-column>
                <el-table-column
                  prop="itemName"
                  label="巡查项"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  prop="value"
                  label="巡查结果"
                  :formatter="formatTd"
                >
                  <template slot-scope="scope">
                    {{ scope.row.value.toString() }}
                    <span v-if="scope.row.resultType == 'POPULATION'">人</span>
                    <span v-if="scope.row.resultType == 'PERCENTAGE'">%</span>
                    <span v-if="scope.row.resultType == 'MONEY'">元</span>
                    <span v-if="scope.row.resultType == 'AMOUNT'">个</span>
                    <span v-if="scope.row.resultType == 'DAYS'">天</span>
                    <span v-if="scope.row.resultType == 'HOURS'">小时</span>
                  </template>
                </el-table-column>
                <el-table-column label="凭证附件" align="center" width="120">
                  <template slot-scope="scope">
                    <el-link
                      type="primary"
                      @click="showAttach(scope.row.disburseFile)"
                      >附件</el-link
                    >
                  </template>
                </el-table-column>
                <!-- 表格数据为空时，页面显示 -->
                <div slot="empty" v-show="tableList.length < 1">
                  <emptyTable emptyText="暂无相关数据"></emptyTable>
                </div>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div class="contentInfoList">
          <el-row>
            <el-col :span="24" class="subTitleBox">
              <div class="secondaryTitle secondaryTitleTheme">巡查结果</div>
            </el-col>
          </el-row>
          <el-row class="contentInfoListItem">
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查结果：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.inspectionResultDesc || '--'
                }}</span>
              </p>
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >存在问题：</span
                >
                <span class="reason">
                  <span class="gridContent contentSty color666 fontSizeF">{{
                    reactDetail.inspectionProblem || '--'
                  }}</span>
                </span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="subBox">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >整改期限：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  reactDetail.rectificationDate || '--'
                }}</span>
              </p>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="spacing"></div>
      <el-row
        class="contentInfo contentInfoLast"
        v-show="reactDetail.rectificationStatus != 'NO_RECTIFICATION_REQUIRED'"
      >
        <div class="contentTitle">
          整改资料
          <span
            v-show="reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'"
            class="tip"
            >需由被巡查单位填写（或由劳动监察代填），填写完成后，整改状态变更为“整改中”</span
          >
        </div>
        <el-row v-if="!isShowEditZg" style="padding: 20px 0 0 38px">
          <el-col>
            <p class="subBox">
              <span class="gridContent color333 fontSizeF fontWeight"
                >整改说明：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                reactDetail.rectificationExplain || '--'
              }}</span>
            </p>
            <p class="subBox">
              <span class="gridContent color333 fontSizeF fontWeight"
                >整改凭证：</span
              >
              <span
                class="gridContent"
                v-if="reactDetail.rectCredentials.length > 0"
              >
                <span class="gridContent">已上传</span>
                <el-link
                  class="seeFile gridContent"
                  @click="showAttach(reactDetail.rectCredentials)"
                  style="margin-top: -2px"
                  >查看</el-link
                >
              </span>
              <span v-else class="gridContent empContentSty color666 fontSizeF"
                >未上传</span
              >
            </p>
          </el-col>
        </el-row>
        <el-row v-else style="padding: 20px 0 0 38px">
          <el-col>
            <el-form
              ref="zgFormData"
              :model="zgFormData"
              :rules="formRules"
              label-width="110px"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="整改说明" prop="rectificationExplain">
                    <el-input
                      v-model="zgFormData.rectificationExplain"
                      type="textarea"
                      :rows="3"
                      maxlength="500"
                      show-word-limit
                      placeholder="请输入整改说明"
                      style="width: 95%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="整改凭证">
                    <uploadAnnex
                      @getFileList="getFileList"
                      :limitationFactor="limitationFactor"
                      @getFile="getFile"
                      :upLoadFile="zgUpLoadFile"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" v-model="zgFormData.fileList">
                  <uploadResult
                    style="margin-left: 120px"
                    :resultList="zgUpLoadFile"
                    @callBackResult="getFile"
                  />
                </el-col>
              </el-row>
              <el-row style="text-align: center; margin-top: 20px">
                <el-col :span="18">
                  <el-form-item>
                    <el-button
                      class="commonBut saveBtn"
                      type="primary"
                      @click="zgSave"
                      :loading="zgIsSaveLoading"
                      >保存</el-button
                    >
                    <el-button class="commonBut" @click="goBack"
                      >取消</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-row>
      <contractEnclosureDialog
        v-if="isShowAttach"
        dialogTitle="凭证附件"
        :tableData="upLoadFile"
        @closeDialog="hiddenAttach"
      ></contractEnclosureDialog>
      <el-dialog
        title="完成整改"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :show-close="false"
        width="400px"
        :modal-append-to-body="false"
      >
        <el-form :model="dialogForm" ref="dialogForm">
          <el-form-item label="是否延期" :label-width="formLabelWidth">
            <el-select
              clearable
              v-model="dialogForm.isDelay"
              placeholder="请选择"
              class="selectWidth"
            >
              <el-option label="未延期" value="1"></el-option>
              <el-option label="已延期" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="toSave"
            class="save"
            :loading="canSave"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import uploadResult from '@/components/publicCom/uploadResult'

export default {
  name: 'patrolDetail',
  components: {
    uploadResult,
  },
  data() {
    return {
      back: true,
      titleText: '返回列表',
      active: 0,
      reactDetail: {
        rectCredentials: [],
      },
      tableList: [],
      upLoadFile: [],
      formData: {
        rectificationExplain: '',
      },
      formRules: {
        rectificationExplain: [
          {
            required: true,
            message: '请输入整改说明',
            trigger: 'blur',
          },
        ],
      },
      isShowAttach: false,
      imgsrc: '',
      domain: '',
      patroId: '', //巡查Id
      taskType: '', //日常/专项巡查
      isShowUpdate: false,
      isShowEditZg: false,
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '上传附件支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      zgUpLoadFile: [], //附件
      zgFormData: {
        id: '',
        rectificationExplain: '',
        fileList: [],
      },
      zgIsSaveLoading: false,
      srcList: [],
      oldSrcList: [],
      dialogVisible: false,
      formLabelWidth: '80px',
      dialogForm: {
        id: '',
        isDelay: '',
      },
      canSave: false,
      dispose: '',
    }
  },
  created() {
    this.taskType = this.$route.query.taskType || this.taskType
    //判断日常还是专项巡查
    if (this.taskType == 'SPECIAL') {
      this.isShowUpdate =
        this.$store.state.buttonLimitsArr.indexOf('mPatrolListSpecial:update') >
        -1
    } else {
      this.isShowUpdate =
        this.$store.state.buttonLimitsArr.indexOf('mPatrolList:update') > -1
    }
    //区分建筑与非建
    this.domain = this.$route.query.domain
    this.patroId = this.$route.query.patroId
    this.dispose = this.$route.query.dispose
    if (this.dispose === 'dispose') {
      this.isShowEditZg = true
    }
    this.imgsrc =
      this.domain == 'JZ'
        ? '../../../static/img/patrol/project.png'
        : '../../../static/img/patrol/company.png'
    this.getRectificationDetail()
  },
  methods: {
    // 查询详情
    getRectificationDetail() {
      let url
      if (this.domain === 'JZ') {
        url = 'api-gov/ipqcjobProject/expand/ipqcProjectDetail'
      } else {
        url = 'api-gov/ipqcjobCompany/expand/ipqcCompanyDetail'
      }
      return this.axios({
        method: 'post',
        url,
        data: {
          id: this.patroId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const results = response.data.result
            this.reactDetail = results
            this.formData.rectificationExplain =
              this.reactDetail.rectificationExplain
            this.zgFormData.rectificationExplain =
              this.reactDetail.rectificationExplain
            this.tableList = results.ipqctemExpandVOS || []
            //没有整改字段导致报错
            this.reactDetail.rectCredentials =
              this.reactDetail.rectCredentials || []
            this.echoFile(this.reactDetail.rectCredentials)
            this.getActiveClass(0)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    //展示附件
    showAttach(upLoadFile) {
      this.upLoadFile = upLoadFile
      this.isShowAttach = true
    },
    hiddenAttach() {
      this.isShowAttach = false
    },
    goBack() {
      var path =
        this.taskType == 'SPECIAL'
          ? '/home/patrol/patrolListSpecial'
          : '/home/patrol/patrolList'
      var name = this.taskType == 'SPECIAL' ? 'patrolListSpecial' : 'patrolList'
      this.$router.push({
        path,
        name,
        query: {
          domain: this.domain,
          taskType: this.taskType,
        },
      })
      this.tabChoose()
    },
    handleAttach() {
      this.isShowEditZg = true
      this.echoFile(this.reactDetail.rectCredentials)
      this.getActiveClass(0)
    },
    toUpdate() {
      this.$router.push({
        path: '/home/patrol/patrolEdit',
        name: 'patrolEdit',
        query: {
          domain: this.domain,
          patroId: this.patroId,
          taskType: this.taskType,
        },
      })
      this.tabChoose()
    },
    //日常、专项tab 选中问题
    tabChoose() {
      var oldUrl =
        this.taskType == 'SPECIAL'
          ? '/home/patrol/patrolListSpecial'
          : '/home/patrol/patrolList'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.zgUpLoadFile = val
    },
    zgSave() {
      this.$refs.zgFormData.validate((valid) => {
        if (valid) {
          let url
          if (this.domain === 'JZ') {
            url = 'api-gov/ipqcproject/rectifyIpqcProject'
          } else {
            url = 'api-gov/ipqccompany/rectifyIpqcCompany'
          }
          this.zgFormData.id = this.patroId
          this.zgFormData.fileList = JSON.stringify(this.zgUpLoadFile)
          this.axios({
            method: 'post',
            url: url,
            data: this.zgFormData,
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '处理整改成功',
                })
                this.isShowEditZg = false
                this.zgFormData.rectificationExplain = ''
                this.zgUpLoadFile = []
                this.getRectificationDetail()
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            .catch((error) => {})
        }
      })
    },
    scrollEvent(e) {
      let scrollItems = document.querySelectorAll('.condition-container')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop
        if (judge) {
          this.activeClass = i
          break
        }
      }
      // 滚动条触底了
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight ===
        e.srcElement.scrollHeight
      ) {
        this.activeClass = 4 - 1
      }
    },
    getActiveClass(index) {
      this.activeClass = index
      let jump = document.querySelectorAll('.condition-container')
      jump[index].scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'start',
      })
    },
    /**完成整改*/
    toRectify() {
      this.dialogForm.id = this.patroId
      this.dialogVisible = true
    },
    toSave() {
      let url
      if (this.domain === 'JZ') {
        url = 'api-gov/ipqcproject/rectifyOverIpqcProject'
      } else {
        url = 'api-gov/ipqccompany/rectifyOverIpqcCompany'
      }
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSave = true
          this.axios({
            method: 'post',
            url: url,
            data: this.dialogForm,
          })
            .then((response) => {
              this.canSave = false
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                this.dialogVisible = false
                this.getRectificationDetail()
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    echoFile(rectCredentials) {
      if (rectCredentials && rectCredentials.length > 0) {
        this.zgUpLoadFile = JSON.parse(JSON.stringify(rectCredentials))
        for (let i = 0; i < rectCredentials.length; i++) {
          this.srcList.push(rectCredentials[i].url)
          this.oldSrcList.push(rectCredentials[i].url)
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0;
  .reactInfo {
    padding: 24px 24px 20px 24px;
    background: #fff;
    .basicInfo {
      border-right: 0.5px solid #dcdfe6;
      .imgBox {
        display: inline-block;
        width: 72px;
        height: 66px;
        img {
          width: 66px;
        }
      }
    }
    .infoBox {
      vertical-align: top;
      display: inline-block;
      width: calc(100% - 100px);
      .name {
        font-size: 20px;
        color: #333333;
        font-weight: 500;
        line-height: 36px;
      }
      .date {
        font-size: 14px;
        color: #333333;
        font-weight: 400;
        line-height: 26px;
      }
    }
    .reactStatus {
      padding-left: 24px;
      line-height: 32px;
      .progressBar {
        margin-top: 10px;
      }
      .blueCircle,
      .whiteCircle {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
      }
      .blueCircle {
        background: #3189ea;
        color: #fff;
      }
      .whiteCircle {
        border: 1px solid #999;
        color: #999;
      }
      .boldColor {
        font-weight: bold;
      }
      .greyColor {
        color: #999;
      }
      .borderRight {
        display: inline-block;
        width: 30px;
        height: 1px;
        background: #009588;
        vertical-align: middle;
      }
      .iconIcon1Finished {
        vertical-align: bottom;
        font-size: 32px;
        color: #3189ea;
      }
      .hoverCss {
        margin-left: 16px;
        font-size: 14px;
        cursor: pointer;
        color: #409eff;
        // &:hover {
        //     text-decoration:underline;
        // }
      }
    }
  }
  .contentInfo {
    background: #fff;

    &List {
      position: relative;
      // padding-bottom: 18px;
      &::after {
        width: 100%;
        height: 1px;
        position: absolute;
        content: '';
        background-color: #e3e7e9;
        transform: translateX(0.5);
        top: 0;
      }
      &Item {
        padding-left: 38px;
      }
    }
    .contentTitle {
      height: 54px;
      line-height: 54px;
      font-size: 18px;
      color: #333333;
      font-weight: 500;
      padding-left: 26px;
      .tip {
        font-size: 14px;
        margin-left: 12px;
        color: #666;
      }
    }
    .subBox {
      font-size: 14px;
      color: #666666;
      font-weight: 400;
      min-height: 36px;
      margin-bottom: 6px;
      // .reason {
      //     display: inline-block;
      // }
    }
    .table {
      padding-bottom: 22px;
    }
  }
  .contentInfoLast {
    // padding-bottom: 18px;
    .contentTitle {
      position: relative;
      &::after {
        width: 100%;
        height: 1px;
        position: absolute;
        content: '';
        background-color: #e3e7e9;
        transform: translateX(0.5);
        bottom: 0;
        left: 0;
      }
    }
  }
  /deep/ .el-button {
    text-align: center;
    height: 36px;
    // line-height: 36px;
  }
  .selectWidth {
    width: 100%;
  }
}
// main.vue 样式覆盖当前页面样式问题
.containerRouterView {
  background: none;
}

.secondLevelTitleStyle {
  margin-top: 0;
}

.subTitleBox {
  padding: 20px 24px;
}
</style>
